<template>
	<view class="order-detail">
		<!-- 订单状态 -->
		<view class="state-area padding-lr margin-tb-sm">
			<view class="padding border-radius bg-base">

				<view v-if="order_data.status == 0 ">
					<view class="dflex-c fs-lg">
						<text class="iconfont icondaifukuan- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">订单待支付</text>
					</view>
				</view>

				<view v-if="[1, 2].includes(order_data.status) ">
					<view class="dflex-c fs-lg">
						<text class="iconfont icondaifahuo- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">订单备货中</text>
					</view>
					<view class="dflex-c">预计1天后发货</view>
				</view>

				<view v-if="order_data.status == 3 ">
					<view class="dflex-c fs-lg">
						<text class="iconfont icondaishouhuo- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">订单已发货</text>
					</view>
					<view class="dflex-c">还剩5天10时自动确认</view>
				</view>

				<view v-if="order_data.status == 4">
					<view class="dflex-c fs-lg">
						<text class="iconfont iconyiwancheng- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">退款处理中</text>
					</view>
					<view class="dflex-c">处理完成将退回用户余额</view>
				</view>

				<view v-if="order_data.status == 5">
					<view class="dflex-c fs-lg">
						<text class="iconfont iconyiwancheng- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">订单已退款</text>
					</view>
					<view class="dflex-c">感谢您的支持，款项已退回余额</view>
				</view>

				<view v-if="order_data.status == 6 ">
					<view class="dflex-c fs-lg">
						<text class="iconfont iconyiwancheng- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">订单已完成</text>
					</view>
					<view class="dflex-c">感谢您的支持，期待下次购买</view>
				</view>

				<view v-if="order_data.status == 7 ">
					<view class="dflex-c fs-lg">
						<text class="iconfont icondaifukuan- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">订单已关闭</text>
					</view>
					<view class="dflex-c">感谢您的支持</view>
				</view>

			</view>
		</view>

		<!-- 收货人 -->
		<view class="address-area padding-lr margin-tb-sm" v-if="order_data.address">
			<view class="dflex padding border-radius bg-main">
				<view class="iconfont icondizhi- margin-right ft-main"></view>
				<view class="flex1">
					<view class="w-full dflex-wrap-w">
						<view class="margin-bottom-xs desc">
							<text>{{ order_data.address.provincial }}{{ order_data.address.city }}
								{{ order_data.address.address }}
							</text>
						</view>
						<view>
							<text>{{ order_data.address.nickName }}</text>
							<text class="margin-left">{{ order_data.address.mobile }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单商品明细 -->
		<view class="padding margin-lr margin-tb-sm bg-main border-radius">
			<view class="goods-area" :class="{ 'margin-top': index > 0 }" v-for="(item, index) in order_detail"
				:key="index">
				<view class="dflex">
					<view class="img">
						<image :src="item.defaultImg"></image>
					</view>
					<view class="margin-left-sm">
						<text class="clamp-2">{{ item.title }}</text>
						<view class="ft-dark fs-xs padding-top-xs">
							<text class="margin-right">× {{item.orders_products.pcount}}</text>
							<!-- {{ item.goods_sku_name || '&nbsp;&nbsp;' }} -->
						</view>
						<view class="margin-top-sm">
							<text class="price">{{ item.price }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单数据 -->
		<view class="order-area padding margin-lr margin-tb-sm bg-main border-radius">
			<view class="item">
				<text>订单编号：</text>
				<text class="">{{ order_data.id }}</text>
				<text class="copy" @click="copy">复制</text>
			</view>
			<view class="item">
				<text>下单时间：</text>
				<text class="">{{ order_data.createdAt }}</text>
			</view>
			<view class="item">
				<text>支付方式：</text>
				<text v-if="order_data.status == 0">用户未支付</text>
				<text v-else>用户余额支付</text>
			</view>
			<view class="item">
				<text>订单备注：</text>
				<text class="">{{ order_data.remark || "" }}</text>
			</view>
		</view>

		<!-- 退款数据 -->
		<view class="order-area padding margin-lr margin-tb-sm bg-main border-radius"
			v-if="[ 4, 5 ].includes(order_data.status)">
			<view class="item">
				<text>退款原因：</text>
				<text class="">{{ "七天无理由退货" }}</text>
			</view>
			<view class="item">
				<text>退款状态：</text>
				<text v-if=" order_data.status == 4">{{ "退款处理中" }}</text>
				<text v-if=" order_data.status == 5">{{ "款项已退回余额" }}</text>
			</view>
		</view>

		<!-- 统计数据 -->
		<view class="total-area padding margin-lr margin-tb-sm bg-main border-radius">
			<view class="ft-dark">
				<view class="item dflex-b">
					<text>优惠</text>
					<text class="">￥{{ order_data.coupon_totals || 0}}</text>
				</view>
				<view class="item dflex-b">
					<text>运费</text>
					<text class="">￥0</text>
				</view>
			</view>
			<view class="item dflex-b">
				<text>实付款</text>
				<text class="price">{{ order_data.totals }}</text>
			</view>
		</view>
		<view style="height: 100rpx;"></view>

		<!-- 底部操作区 -->
		<view class="oper-area dflex-b padding-right padding-left-sm">
			<view class="dflex">
				<view class="btn-area dflex dflex-flow-c" @click="tohome">
					<text class="iconfont iconshouye-1"></text>
					<text>首页</text>
				</view>
			</view>
			<view class="dflex-e">
				<view class="dflex" v-if="order_data.status == 0 ">
					<button class="action-btn" @click="cancelOrder">取消订单</button>
					<button v-if="order_data.status == 0 " class="action-btn main-btn" @click="payment">立即支付</button>
				</view>
				<view class="dflex" v-if="
					[ 1, 2, 3 ].includes(order_data.status)">
					<button class="action-btn border-radius-big bg-main" @click="refund">申请退款</button>
				</view>	
				<view class="dflex" v-if="order_data.status == 3 ">	
					<button class="action-btn main-btn" @click="toreceipt">确认收货</button>
				</view>

				<view v-if="order_data.status == 6 || order_data.status == 7 || order_data.status == 5"><button @click="delorder"
						class="action-btn main-btn">删除订单</button></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	import {
		queryOrdersApi,
		queryOneOrdersApi,
		operateOrdersApi,
		payOrdersApi,
		deleteOrdersApi,
	} from "@/api/order.js"

	export default {
		computed: {
			...mapState(['islogin', 'member'])
		},

		components: {
			// share
		},
		data() {
			return {
				// 商品数据
				order_detail: [],

				// 订单数据
				order_data: {},
		
				// addressData: [],
				addressData: [],

				sharekefuList: [],

				shareEmptyList: [],
				
				// 订单id
				order_id: '',
				
				//订单修改后状态
				order_status: '',
				
				//订单总额
				order_totals: '',
				//用户余额
				user_balance: 0.00,
				
				goods_price_tip: '产品总计',
				time_remaining: 0,
			};
		},
		onUnload() {
			uni.$emit('__event_order', 'refresh');
		},
		onLoad(options) {
			// this.user_balance =this.member.totals;
			// console.debug(this.user_balance,"<=================this.user_balance")
			this.order_id = options.order_id;
			// console.log(this.order_id, "<============================this.options.order_id")
			// this.getOneOrdersFunc();

		},
		onShow() {
			this.loadData();
		},
		methods: {
			tohome() {
				this.$api.tohome();
			},
			async loadData() {
				let _this = this;
				_this.getOneOrdersFunc();

			},
			
			
			//获取用户单个订单数据
			async getOneOrdersFunc() {
				const response = await queryOneOrdersApi({
					id: this?.order_id ?? ""
				}).catch(() => {});
				// console.log('🚀🚀🚀🚀🚀 response - queryOrdersApi: ', response);
				if (response?.code === 200) {
					//订单详情
					this.order_data = response?.data ?? {};
					console.log(this.order_data, "<==============this.order_data")
					//订单商品数据
					this.order_detail = this?.order_data?.products ?? [];
					// console.log(this.order_detail, "<==============order_detail")
					//订单地址
					this.addressData = this?.order_data?.address ?? [];
					this.order_totals = this.order_data.totals ;

				} else {
					this.order_data = {};
				}
			},

			// 立即支付
			async payment() {
				let _this = this;

				uni.showModal({
					title: '提示',
					content: '确认支付',
					success: await function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍后'
							});
							console.debug(_this.order_totals,"<=====================_this.order_totals")
							console.debug(_this.member.totals,"<=====================_this.member.totals")
							if ((_this.member.totals - _this.order_totals) >= 0.00 ) {								
								_this.payOrdersFunc();
							} else {
								_this.$api.msg("余额不足，请充值");
								
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					complete() {
						uni.hideLoading();
					}
				});
			},

			//用户支付扣除余额
			async payOrdersFunc() {
				console.debug(this?.member?.id, "<=================payOrdersFunc +++ this?.member?.id")
				console.debug(this?.order_totals,"<=================payOrdersFunc +++ this.order_data?.totals")
				const response = await payOrdersApi({
					uid: this?.member?.id ?? '',
					order_totals: this?.order_totals ?? '',
				}).catch(() => {});
				if (response?.code === 200) {
					// this.getOneOrdersFunc();
					this.order_status = 1;
					this.operateOrdersFunc();
					this.$api.msg("支付成功");
				} 
				else {
					this.$api.msg("服务器繁忙支付失败");
				}
				return;
			},
	
			// 确认收货
			async toreceipt() {
				let _this = this;

				uni.showModal({
					title: '提示',
					content: '确认收货',
					success: await function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍后'
							});
							_this.order_status = 6;
							_this.operateOrdersFunc();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
				
			// 删除订单
			async delorder() {
				let _this = this;

				uni.showModal({
					title: '提示',
					content: '删除订单',
					success:await function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍后'
							});
						_this.deleteOrderFunc();
						} else if (res.cancel) {
							console.log('点击取消');
						}
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			
			//用户删除订单
			async deleteOrderFunc(){
				const response = await deleteOrdersApi({
					order_id: this?.order_id ?? '',
					
				}).catch(() => {});
				if (response?.code === 200) {
					uni.navigateBack();
					this.$api.msg("订单删除成功");
				}else{
					this.$api.msg("服务器繁忙，稍后再试");
				}
				return;
			},

			// 取消订单
			async cancelOrder() {
				let _this = this;

				uni.showModal({
					title: '提示',
					content: '取消订单',
					success: await
					function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍后'
							});
							_this.order_status = 7;
							_this.operateOrdersFunc();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			// 点击复制
			copy() {
				let _this = this;

				uni.setClipboardData({
					data: _this.order_id,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功'
								});
							}
						});
					}
				});
			},


			
			//申请退款
			async refund() {
				let _this = this;

				uni.showModal({
					title: '提示',
					content: '申请退款',
					success: await
					function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍后'
							});
							_this.order_status = 4;
							_this.operateOrdersFunc();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					complete() {
						uni.hideLoading();
					}
				});
			},

			//修改用户订单数据
			async operateOrdersFunc() {
				console.log(this.order_status, "<================= caozuo_his?.order_status")
				console.log(this.order_id, "<================= caozuo_his?order_id")

				const response = await operateOrdersApi({
					id: this?.order_id ?? '',
					status: this?.order_status ?? '',
				}).catch(() => {});
				if (response?.code === 200) {
					this.getOneOrdersFunc();
					this.$api.msg("操作成功");
				}		
				return;
			},


		},
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.order-detail .item text:first-child {
		width: 152rpx;
		text-align: right;
		display: inline-block;
	}

	/* 状态区 */
	.state-area {}

	/* 收货人 */
	.address-area {}

	/* 商品区 */
	.goods-area {
		&:last-child {
			margin-bottom: 0;
		}

		image {
			width: 180rpx;
			height: 180rpx;
		}
	}

	/* 订单数据区 */
	.order-area {
		.item {
			line-height: 66rpx;

			.copy {
				margin-left: 20rpx;
				padding: 10rpx 40rpx;
				background-color: #f1f1f1;
				border-radius: 40rpx;
				font-size: 24rpx;
			}
		}
	}

	/* 数据统计区 */
	.total-area {
		.item {
			line-height: 48rpx;

			text {
				padding-right: 16rpx;
			}
		}
	}

	/* 操作区 */
	.oper-area {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		position: fixed;
		z-index: 1;
		bottom: 0;
		left: 0;
		border-top: 1px solid #f0f0f0;

		.btn-area {
			font-size: $font-sm;
			color: $font-color-base;
			width: 96rpx;

			.iconfont {
				font-size: 40rpx;
				line-height: 48rpx;
			}
		}

		/* 操作按钮 */
		.action-btn {
			width: 156rpx;
			height: inherit;
			line-height: inherit;
			margin: 0;
			margin-left: 20rpx;
			padding: 12rpx 0;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 100px;
			/* #ifdef MP-QQ || MP-ALIPAY */
			border: 1px solid;
			/* #endif */

			&:after {
				border-radius: 100px;
			}

			&.main-btn {
				background: #fff9f9;
				color: $base-color;

				&:after {
					border-color: #f7bcc8;
				}
			}
		}
	}
</style>